<template>
	<div class="body-login">
		<Header isHome="true" />
		<main>
			<div class="login-main">
				<div class="login-tabs">
					<el-tabs v-model="activeTab" stretch>
						<el-tab-pane label="邮箱登录" name="email">
							<el-form :model="emailForm" :rules="emailRules" ref="emailFormRef">
								<el-form-item prop="email">
									<el-input v-model="emailForm.email" placeholder="请输入邮箱">
										<template #prefix>
											<el-icon><Message /></el-icon>
										</template>
									</el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input
										v-model="emailForm.password"
										placeholder="请输入密码"
										type="password"
										show-password
									>
										<template #prefix>
											<el-icon><Lock /></el-icon>
										</template>
									</el-input>
								</el-form-item>
								<el-button type="primary" @click="handleEmailLogin" class="login-btn"
									>登录</el-button
								>
							</el-form>
						</el-tab-pane>

						<!-- <el-tab-pane label="手机号登录" name="phone">
							<el-form :model="phoneForm" :rules="phoneRules" ref="phoneFormRef">
								<el-form-item prop="phone">
									<el-input v-model="phoneForm.phone" placeholder="请输入手机号">
										<template #prefix>
											<el-icon><Phone /></el-icon>
										</template>
									</el-input>
								</el-form-item>
								<el-form-item prop="code">
									<div class="code-input">
										<el-input v-model="phoneForm.code" placeholder="手机验证码">
											<template #prefix>
												<el-icon><Key /></el-icon>
											</template>
										</el-input>
										<el-button
											type="primary"
											:disabled="codeDisabled"
											@click="getCode"
											class="get-code-btn"
										>
											{{ codeButtonText }}
										</el-button>
									</div>
								</el-form-item>
								<el-button type="primary" @click="handlePhoneLogin" class="login-btn"
									>登录</el-button
								>
							</el-form>
						</el-tab-pane> -->
					</el-tabs>
				</div>
				<div class="login-footer">
					<!-- <el-link type="primary" @click="activeTab = activeTab === 'email' ? 'phone' : 'email'">
						{{ activeTab === 'email' ? '手机号登陆' : '邮箱登陆' }}
					</el-link> -->
					<el-link type="primary" @click="goToRegister">注册</el-link>
					<el-link type="primary" @click="goToHome">返回首页</el-link>
				</div>
			</div>
		</main>
		<Footer />
	</div>
</template>

<script setup>
	import Header from '@/components/Header/index.vue'
	import Footer from '@/components/Footer/index.vue'
	import { ref, reactive } from 'vue'
	import { useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	import { userStore } from '@/store/user'
	import { login } from '@/api/user'

	const router = useRouter()
	const user = userStore()

	// 当前激活的标签页
	const activeTab = ref('email')

	// 邮箱登录表单
	const emailForm = reactive({
		email: '',
		password: ''
	})

	// 表单验证规则
	const emailRules = {
		email: [
			{ required: true, trigger: 'blur', message: '请输入邮箱' },
			{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
		],
		password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
	}

	const emailFormRef = ref(null)

	// 邮箱登录
	const handleEmailLogin = () => {
		emailFormRef.value.validate(async (valid) => {
			if (valid) {
				const params = {
					account: emailForm.email,
					password: emailForm.password
				}
				const rData = (await login(params)).data
				if (rData.code == 200) {
					const nowUser = rData.user
					user.setRole(nowUser.userType)
					user.setId(nowUser.userId)
					user.setName(nowUser.userName)
					ElMessage.success('登录成功')
					if (nowUser.userType == 0) {
						router.replace('/framework')
					} else {
						router.replace('/manage/user')
					}
				} else {
					ElMessage.error(rData.msg)
				}
			} else {
				return false
			}
		})
	}

	// 跳转到注册页
	const goToRegister = () => {
		router.push('/register')
	}

	// 返回首页
	const goToHome = () => {
		router.push('/')
	}

	// 手机号登录表单
	// const phoneForm = reactive({
	// 	phone: '',
	// 	code: ''
	// })

	// 验证码按钮状态
	// const codeDisabled = ref(false)
	// const codeButtonText = ref('获取验证码')
	// let countdown = 60

	// const phoneRules = {
	// 	phone: [{ required: true, trigger: 'blur', message: '请输入手机号' }],
	// 	code: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
	// }

	// 获取验证码
	// const getCode = () => {
	// 	if (!phoneForm.phone) {
	// 		ElMessage.warning('请输入手机号')
	// 		return
	// 	}

	// 	codeDisabled.value = true
	// 	const timer = setInterval(() => {
	// 		countdown--
	// 		codeButtonText.value = `${countdown}秒后重新获取`
	// 		if (countdown <= 0) {
	// 			clearInterval(timer)
	// 			codeDisabled.value = false
	// 			codeButtonText.value = '获取验证码'
	// 			countdown = 60
	// 		}
	// 	}, 1000)

	// 	// 这里应该调用API发送验证码
	// 	ElMessage.success('验证码已发送')
	// }

	// // 手机号登录
	// const handlePhoneLogin = () => {
	// 	user.setIsManager(false)
	// 	router.replace('/framework')
	// }
</script>

<style lang="scss" scoped>
	.body-login {
		width: 100vw;
		height: 100vh;
	}

	main {
		height: calc(100% - 175px);
		background: url('@/assets/images/bg.png') fixed no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-main {
		width: 450px;
		padding: 40px;
		background-color: #fff;
		border-radius: 8px;
	}

	.login-tabs {
		.el-form {
			margin-top: 15px;
		}

		:deep(.el-tabs__item) {
			font-size: 24px;
		}

		:deep(.el-tabs__nav-wrap::after) {
			height: 1px;
		}

		:deep(.el-input__inner) {
			font-size: 16px;
			height: 38px;
			line-height: 38px;
		}
	}

	.code-input {
		display: flex;

		.el-input {
			flex: 1;
			margin-right: 10px;
		}

		.get-code-btn {
			width: 120px;
			height: 38px;
			font-size: 16px;
		}
	}

	.login-btn {
		width: 100%;
		height: 50px;
		font-size: 18px;
		margin-top: 5px;
	}

	.login-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;

		.el-link {
			font-size: 14px;
		}
	}
</style>
